<template>
	<view>
		<!-- 搜索 -->
		<u-search placeholder="搜索你想要的背景图"
			:showAction="false"
			margin="25rpx 25rpx 0 25rpx"
		></u-search>
		
		<view class="home">
			<!-- 轮播图 -->
			<u-swiper
					:list="bannar"
					previousMargin="30"
					nextMargin="30"
					:circular="true"
					:autoplay="true"
					radius="5"
					bgColor="#ffffff"
					height="150"
					:indicator="true"
			></u-swiper>
		</view>
		<view class="category">
			<view class="cateone">
						<u-grid
						:border="false"
						col="4"
				>
					<u-grid-item
							v-for="(listItem,listIndex) in category"
							:key="listIndex"
					>
						<u-icon
								:customStyle="{paddingTop:20+'rpx'}"
								:name="listItem.name"
								:size="22"
						></u-icon>
						<text class="grid-text">{{listItem.title}}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<template>
			<index-more :indexmore="hot"></index-more>
		</template>
		<template>
			<index-more :indexmore="guanfang"></index-more>
			<view class="topic-new">
				<ul v-for="(item,index) in imagelist" :key="index">
					<li><image :src="item.src"></image></li>
				</ul>
				
			</view>
		</template>
		<view class="wrap">
			<u-back-top :scrollTop="scrollTop" :mode="mode" :iconStyle="iconStyle"></u-back-top>
		</view>
	</view>
</template>

<script>
	import indexMore from "../../components/index/index-more.vue";
	export default {
		components:{
			indexMore
		},
		data() {
			return {
				scrollTop:0,
				mode: 'square',
				iconStyle: {
					fontSize: '32rpx',
					color: '#2979ff'
				},
				swipers:[],
				category: [{
					name: 'photo',
					title: 'Zero'
					},
					{
						name: 'lock',
						title: '可爱'
					},
					{
						name: 'star',
						title: '风景'
					},
					{
						name: 'hourglass',
						title: '小众'
					},
					{
						name: 'home',
						title: '文字'
					},
					{
						name: 'star',
						title: '动物'
					},
					{
						name: 'star',
						title: '女生'
					},
					{
						name: 'star',
						title: '男生'
					},
				],
				imagelist:[
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						
					},
				],
				bannar: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				hot:{
					title:"热门推荐",
				},
				guanfang:{
					title:"官方推荐",
				},
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style lang="scss" scoped>

	.home{
		border-radius: 20rpx;
		margin: 30rpx 0rpx;
		.seach{
			padding: 100rpx 10rpx;
		}
		
	}
	.category{
		.cateone{
			background-color: #FFFFFF;
			border-radius:20rpx;
		}
	}
	.u-cell{
		padding: 20rpx 35rpx;
		font-size: 38rpx;
		color: #000000;
		
	}
	.home-list{
		padding: 20upx;
	}
	.grid-text {
		font-size: 14px;
		color: #000000;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		font-weight: 500;
		/* #endif */
	}
	.topic-new{
		margin: 0 auto;
		ul
		 li{
			width: 300rpx;
			height: 300rpx;
			// border: 2rpx solid black;
			float: left;
			position: relative;
			margin-left: 46rpx;
			
			margin-top: 23rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
		.wrap {
			height: 100vh;
		}
	}
	
</style>
